<script setup lang="ts">

import IndexSlot from "@/views/homePage/components/indexSlot.vue";
import DisplaySlot from "@/views/homePage/displaySlot.vue";
import TopView from "@/components/search/TopView.vue";
import {getMoreDetail, randomList} from "@/api/home";
import {ref} from "vue";
import NoMoreData from "@/views/homePage/components/noMoreData.vue";
import {useRouter} from "vue-router";

// const characterlist =ref()
// getMoreDetail().then(res=>{
//     console.log(res)
//     console.log(res.data)
//     characterlist.value = res.data.map(item=> {
//         item.avatar = 'http://192.168.5.120:8199' +item.avatar
//         return item
//     })
//     console.log(characterlist.value)
// })
// 获取人物详情
const randomLists=ref()
randomList().then(res=> {

    randomLists.value = res.rows.map(item=> {
        item.mainPic = 'http://192.168.5.120:8199'+item.mainPic
        return item
    })
})
const router = useRouter()
// function todetail(item) {
//     router.push({
//         path:'charater',
//         query:{
//             publicizeId:item.userId
//             // contactUserId
//         }
//     })
// }
// 去详情页
function todetail(item) {
    router.push({
        path:'charater',
        query:{
            publicizeId:item.publicizeId
        }
    });
}
</script>

<template>
    <top-view>冀商风采</top-view>
    <index-slot>
        <template v-slot:back/>
    </index-slot>
    <div class="section">
        <display-slot>
            <template v-slot:title>
                <div class="title">
                    <div class="titleImg">
                        <img src="../../assets/images/冀商风采.png" alt="">
                    </div>
                    <div class="titleText">冀商风采</div>
                </div>
            </template>
            <template v-slot:content>
                <!--                <router-link to="./charater">-->
                <div class="content" v-for="item in randomLists" :key="item.contactUserId" @click="todetail(item)">
                    <div class="imgBox">
                        <img :src="item.mainPic" alt="">
                    </div>
                    <div class="contentRight">
                        <div class="contentRightTitle">
                            {{item.title}}
                        </div>
                        <div class="contentRightDetail">
                            <div >外贸出口领域领军人</div>
                            <div class="contentDetail" >
                                {{item.intro}}
                            </div>
                        </div>
                    </div>
                </div>
                <!--                </router-link>-->
            </template>
        </display-slot>
        <no-more-data/>
    </div>
</template>

<style scoped>
.section {
    margin-top: -70px;
}
.title {
    display: flex;
    .titleImg {
        margin: 3px 8px 3px 0;
        width: 15px;
        height: 15px;
        img {
            width: 100%;
        }
    }
}
.content{
    height: 175.5px;
    display: flex;
    margin-bottom: 10px;
    .imgBox {
        width: 120px;
        height: 175.5px;
        margin: 0.5px 0 ;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .contentRight {
        width: 60%;
        margin-left: 14.5px;
        .contentRightTitle {
            font-size: 19px;
            color: #333;
            margin-bottom: 10.5px;
        }
        .contentRightDetail {
            font-size: 13px;
            .contentDetail {
                display: -webkit-box;
                -webkit-line-clamp: 5;
                -webkit-box-orient: vertical;
                overflow: hidden;
                text-overflow:ellipsis;
            }
        }
    }
}
</style>